<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>hoyo</title>

<!-- Bootstrap -->
<link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
<link href="/hoyo/css/mine.css" rel="stylesheet" />
<style>
body {
	background-color: #f1f3f7;
}

.container-left {
	width: 220px;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	height: 100%;
	box-shadow: #c7ced1 0 0 5px;
	z-index:100;
}

.left-bc {
	width: 100%;
	height: 90px;
	background-image: url(/hoyo/img/admin-logo.png);
	background-repeat: no-repeat;
	background-position: center;
}

.left-ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.left-ul li {
	display: block;
	width: 100%;
	height: 45px;
	text-align: center;
	font-size: 14px;
	font-family: "微软雅黑";
	position: relative;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	box-sizing: content-box;
}

.li-icon {
	display: inline-block;
	background-color: transparent;
}

.li-font {
	display: inline-block;
	vertical-align: top;
	line-height: 45px;
	height: 45px;
	padding-left: 19px;
	width: 75px;
	background-color: transparent;
}

.svg-icon {
	width: 23px;
	height: 23px;
	margin-top: 12px;
}

.left-li-hover {
	background-color: #37c8f7;
	border-radius: 30px;
	height: 45px;
	width: 160px;
	margin-left: 30px;
	color: #FFFFFF;
}

.container-right {
	position: relative;
	padding: 0 0 0 220px;
	height: 100%;
	padding-top: 20px;
	z-index:11;
}

.total-info {
	background-color: #FFFFFF;
	min-height: 160px;
	padding: 30px 0;
	text-align: center;
	box-shadow: #c7ced1 0 0 2px;
	margin-bottom: 20px !important;
	border-radius: 6px;
}

.total-info-div {
	height: 100px;
	padding-top: 15px;
	border-right: 1px solid #E5E9EF;
}

.total-info-icon {
	width: 45px;
	height: 45px;
}

.total-info-div-left {
	display: inline-block;
	margin-right: 12px;
	vertical-align: top;
	margin-top: 5px;
}

.total-info-div-right {
	display: inline-block;
	height: 100px;
}

.div-name {
	font-size: 16px;
}

.number {
	font-size: 36px;
	text-align: left;
}

.info-content-title {
	height: 60px;
	margin: 0 15px;
	margin-bottom: 10px;
}

.video-upload {
	background-color: #FFFFFF;
	box-shadow: #c7ced1 0 0 2px;
	border-radius: 6px;
	margin-bottom: 20px !important;
	padding-bottom: 10px;
}

.inline-block {
	display: inline-block;
}

.row {
	margin: 0;
}

.info-content-title-icon {
	width: 34px;
	height: 34px;
}

.content-font {
	height: 60px;
	line-height: 60px;
	vertical-align: top;
	font-family: "微软雅黑";
	font-size: 16px;
}

.content-logo {
	margin-top: 10px;
	margin-right: 8px;
}

.content-btn {
	border-color: #ccc;
	line-height: 60px;
}

.main-info {
	height: 180px;
	overflow: hidden;
}

.main-video-pic {
	width: 160px;
	height: 120px;
}

.clear {
	margin: 0;
	padding: 0;
}

.info-pic {
	width: 190px;
	height: 120px;
}

.main-info-content {
	font-family: "微软雅黑";
}

.main-info-content p {
	padding: 0;
	margin: 0;
	padding-top: 3px;
}

.info-intro {
	height: 40px;
	overflow: hidden;
}

.title {
	display: inline-block;
	height: 20px;
	overflow: hidden;
}

.main-info-icon {
	display: inline-block;
	margin-right: 6px;
}

.main-info-font {
	display: inline-block;
	line-height: 24px;
	height: 24px;
	width: 160px;
	overflow: hidden;
}

.main-info-icon .icon {
	vertical-align: super;
	margin-top: 3px;
}

.main-info-div {
	padding: 6px 3px;
}

.main-info-title {
	padding: 2px 0;
	height: 24px;
}

.main-info-uploader {
	padding: 2px 0;
	height: 24px;
}

.video-tousu {
	background-color: #FFFFFF;
	box-shadow: #c7ced1 0 0 2px;
	border-radius: 6px;
	margin-bottom: 20px !important;
	padding-bottom: 10px;
}

.video-report {
	background-color: #FFFFFF;
	box-shadow: #c7ced1 0 0 2px;
	border-radius: 6px;
	margin-bottom: 20px !important;
	padding-bottom: 10px;
	min-height: 361px;
}

.danmu-tr {
	height: 40px;
}

.danmu-name {
	display: inline-block;
	line-height: 30px;
	height: 30px;
	vertical-align: super;
}

.danmuReport-user1 {
	width: 80px;
	height: 36px;
	line-height: 34px;
	overflow: hidden;
	display: inline-block;
	box-sizing: border-box;
	padding: 3px 2px;
	text-align: center;
}

.danmuReport-user2 {
	width: 80px;
	height: 36px;
	overflow: hidden;
	display: inline-block;
	box-sizing: border-box;
	line-height: 34px;
	padding: 3px 2px;
	text-align: center;
}

.danmuReport-content {
	width: 230px;
	height: 36px;
	line-height: 34px;
	overflow: hidden;
	display: inline-block;
	box-sizing: border-box;
	padding: 3px 2px;
}

.danmuReport-reason {
	width: 230px;
	height: 36px;
	overflow: hidden;
	display: inline-block;
	box-sizing: border-box;
	line-height: 34px;
	padding: 3px 2px;
}

.danmuReport-action {
	width: 200px;
	height: 36px;
	overflow: hidden display: inline-block;
	box-sizing: border-box;
	line-height: 30px;
	padding: 3px 2px;
}

.danmu-table>tr>td {
	padding: 0;
	margin: 0;
	height: 40px;
}

.danmu-table {
	margin-left: 15px !important;
	margin-right: 15px !important;
	width: 920px;
}

/*
			 * 
			 */
.upload-info {
	background-color: #FFFFFF;
	height: auto;
	padding: 30px 0;
	box-shadow: #c7ced1 0 0 2px;
	margin-bottom: 20px !important;
	border-radius: 6px;
}

.upload-info-div-left {
	display: inline-block;
	vertical-align: top;
	padding-right: 15px;
}

.upload-info-div-right {
	display: inline-block;
}

.title-info {
	margin-right: 15px;
	color: #526A82;
	vertical-align: top;
}

.introduction-detail {
	width: 670px;
}

.upload-row {
	margin: 20px 15px;
	margin-right: 30px;
	padding-bottom: 20px;
	border-bottom: 1px #E1E4E7 solid;
	font-family: "微软雅黑";
	font-size: 13px;
}

.padding {
	padding: 2px 5px;
}

.introduction-detail {
	padding-right: 10px;
	margin-bottom: 15px;
	padding-top: 6px;
}

.list-btn {
	width: 135px;
	text-align: left;
	padding: 3px 7px;
	margin-right: 20px;
	margin-bottom: 12px;
	overflow: hidden;
	color: #222222;
	background-color: #FFFFFF;
	border: 1px solid #ccd0d7;
}

.movie-list {
	width: 600px;
	display: inline-block;
	margin-top: 2px;
}

.list-btn-active {
	background-color: #00a1d6;
	color: #FFFFFF;
}
/*
	    	 * 
	    	 */
</style>
</head>
<body style="height: 100%;">
	<div class="container-left" style="height: 100%; position: fixed;">
		<div class="left-bc"></div>
		<div>
			<ul class="left-ul">
				<li>
					<div>
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-shouye2-copy"></use>
								</svg>
						</div>
						<div class="li-font"><a href="/hoyo/admin">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</a></div>
					</div>
				</li>
				<li>
					<div class="left-li-hover">
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-weibiaoti3"></use>
								</svg>
						</div>
						<div class="li-font" >投稿管理</div>
					</div>
				</li>
				<li>
					<div>
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-shipin7"></use>
								</svg>
						</div>
						<div class="li-font"><a href="/hoyo/admin/movie">视频管理</a></div>
					</div>
				</li>
				<li><div>
					<div class="li-icon">
						<svg class="icon svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-tousu"></use>
							</svg>
					</div>
					<div class="li-font"><a href="/hoyo/admin/catalog">投诉管理</a></div></div>
				</li>
				<li>
					<div class="li-icon">
						<svg class="icon svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-danmuliang"></use>
							</svg>
					</div>
					<div class="li-font"><a href="/hoyo/admin/bullet">弹幕管理</a></div>
				</li>
				<li>
					<div class="li-icon">
						<svg class="icon svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-icon47-copy"></use>
							</svg>
					</div>
					<div class="li-font"><a href="/hoyo/admin/comment">评论管理</a></div>
				</li>
				<li>
					<div>
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-icon_tip_off"></use>
								</svg>
						</div>
						<div class="li-font"><a href="/hoyo/admin/report">举报管理</a></div>
					</div>
				</li>
				<li>
					<div>
						<div class="li-icon">
							<svg class="icon svg-icon" aria-hidden="true">
								  <use xlink:href="#icon-quanxian-copy-copy"></use>
								</svg>
						</div>
						<div class="li-font"><a href="/hoyo/admin/channel">频道管理</a></div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="container container-right">
		<div class="my-container" id="catalogs">
			<div class="row upload-info" v-for="catalog in pageInfo.list">
				<div class="upload-row">
					<div class="upload-info-div-left">
						<img v-bind:src="catalog.catalogPoster" class="info-pic" />
					</div>
					<div class="upload-info-div-right">
						<div class="upload-title padding">
							<span class="title-info">标题</span> <span
								class="upload-title-name" >{{catalog.catalogName}}</span>
						</div>
						<div class="uploader padding">
							<span class="title-info">上传者</span> <span
								class="upload-title-name" >{{catalog.nickname}}</span>
						</div>
						<div class="channel-type padding">
							<span class="title-info">频道</span> <span
								class="channel-type-name" >{{catalog.channelName}}</span>
						</div>
						<div class="jishu padding">
							<span class="title-info">集数</span>
							<!--<div class="movie-list" id="movie-list" style="display: none;"> 
							  		<button type="button" class="list-btn btn btn-sm"  :title="item.movie_name" :class="{ 'list-btn-active': item.selected }" v-for="(index, item) of items" @click="videoSwitch(index,item.mid,item.url)">
							  			<span>{{ index+1 }}、</span>
							  			<span>{{ item.movie_name }}</span>
							  		</button>
							  	</div>-->
							<div class="movie-list" id="movie-list">
								<button v-for="(index, movie) in catalog.movies" type="button"
									class="list-btn btn btn-sm"
									v-on:click="openVideo($event, movie.id)">
									<span>{{index+1}}、</span>
									<span>{{movie.movieName}}</span>
								</button>
							</div>
						</div>
						<div style="width: 680px; height: 381px; display: none;" id="video"></div>
						<div class="introduction padding">
							<span class="title-info">简介</span>
							<div class="introduction-detail">
								{{catalog.introduction}}
							</div>
						</div>
						<div class="btn-group btn-group-sm " style="float: right">
							<button type="button" class="btn btn-warning"
								v-on:click="movie_checkOk(this,catalog.id)">审核通过</button>
							<button type="button" class="btn btn-primary"
								v-on:click="movie_checkNotOk(this,catalog.id)">审核不通过</button>
						</div>
					</div>
				</div>
			</div>
			<div class="row" v-if="pageInfo.size>0">
				<nav aria-label="Page navigation">
					<ul class="comment-bottom-page pagination pagination-lg"
						id="commentFooter">
						<li v-if="!pageInfo.isFirstPage" v-on:click="getCatalogs(1)">
							<a style="cursor: pointer">首页</a>
						</li>
						<li v-if="pageInfo.hasPreviousPage" v-on:click="getCatalogs(pageInfo.pageNum-1)">
							<a style="cursor: pointer">上一页</a>
						</li>
						<li v-if="pageInfo.pages>1" v-for="pageNumber in pageInfo.navigatePageNums">
							<a v-if="pageInfo.pageNum!=pageNumber" v-on:click="getCatalogs(pageNumber)" style="cursor: pointer">{{pageNumber}}</a> 
							<span v-else>{{pageNumber}}</span></li>
						<li v-if="pageInfo.hasNextPage" v-on:click="getCatalogs(pageInfo.pageNum+1)">
							<a style="cursor: pointer">下一页</a>
						</li>
						<li v-if="!pageInfo.isLastPage" v-on:click="getCatalogs(pageInfo.pages)">
							<a style="cursor: pointer">尾页</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		style="padding-top: 200px;" aria-labelledby="myModalLabel"
		aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">通知</h4>
				</div>
				<div class="modal-body" id="messageBody">确定执行该动作吗？</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
<script src="/hoyo/js/jquery-3.2.1.min.js"></script>
<script src="/hoyo/js/bootstrap.min.js"></script>
<script src="/hoyo/js/vue.js"></script>
<script src="/hoyo/js/iconfont.js"></script>
<script src="/hoyo/js/vue1.0.26.js"></script>
<script src="/hoyo/js/vue-strap.min.js"></script>
<script>
	$(function(){
		var catalogVM = new Vue({
			el:"#catalogs",
			data:{
				pageInfo:{}
			},
			created: function(){
				var vm = this;
				$.get({
					url:"/hoyo/admin/catalog/notCheck",
					data:"pageNum=1&pageSize=3",
					success: function(data){
						var result = JSON.parse(data);
						console.log(result);
						if(result.success){
							vm.pageInfo = result.pageInfo;
						}else{
							
						}
					}
				});
			},
			methods: {
				openVideo: function(e, id){
					console.log($(e.currentTarget));
					var videoEl =$(e.currentTarget).parent().parent().next();
					videoEl.show();
					$(e.currentTarget).addClass("list-btn-active");
					$.each($(e.currentTarget).siblings(), function(index, ele, array) {
						$(ele).removeClass("list-btn-active");
					});
					$.post({
						url : "/hoyo/movie/url",
						data : "id=" + id,
						success : function(data) {
							var result = JSON.parse(data);
							console.log(result);
							if (result.success) {
								videoEl.html("<video controls='controls' style='width: 670px;height: 400px;' preload='auto' autoplay='autoplay'><source src="+result.url+"/></video>");
								videoEl.show();
							}
						}
					});
				},
				movie_checkOk: function(e, id){
					var vm = this;
					$.ajax({
						method : "POST",
						url : "/hoyo/admin/catalog/checkPass",
						data : "id=" + id,
						success : function(data) {
							var result = JSON.parse(data);
							console.log(result);
							if (result.success) {
								vm.pageInfo = result.pageInfo;
								Messenger.show("操作成功，视频目录审核通过，已上架");
							} else {
								Messenger.show("操作失败，服务器发生未知错误");
							}
						}
					});
				},
				movie_checkNotOk: function(e, id){
					
				},
				getCatalogs: function(pageNum){
					var vm = this;
					$.get({
						url:"/hoyo/admin/catalog/notCheck",
						data:"pageNum="+pageNum+"&pageSize=3",
						success:function(data){
							var result = JSON.parse(data);
							console.log(result);
							if(result.success){
								vm.pageInfo = result.pageInfo;
							}else{
								
							}
						}
					});
				}
			}
		});
	});
	
	var Messenger = {
		show: function(message){
			$("#messageBody").html(message);
			$("#myModal").modal("show");
		}
	}
</script>
</html>
